<template>
  <div>
    <el-dialog width="480px"
               top="24vh"
               :visible.sync="pictureShow"
               append-to-body
               :close-on-click-modal="false">
      <div slot="title">完成拼图验证</div>
      <!-- style="z-index:9999;    position: relative;" -->
      <div v-if="pictureShow"
           class="authen-show">
        <authentication :on-success="success"
                        :on-syntony="picture"
                        width="260"
                        height="120"
                        pl-size="30"
                        deviation="5"
                        :puzzle-img-list="imgLists"
                        class="auth-entication-style"
                        @fatherMethod="pictureShow = false"></authentication>
      </div>
    </el-dialog>
    <el-dialog :title="title"
               top="24vh"
               class="dialog-box"
               :before-close="handleClose"
               :visible="visible"
               :width="width">
      <el-form ref="ruleForm"
               :model="ruleForm"
               label-width="110px">
        <el-form-item v-if="userType != 3"
                      label="手机号">
          {{ ruleForm.phoneNum }}
        </el-form-item>
        <el-form-item v-if="userType != 3"
                      label="手机验证码"
                      prop="smsCode"
                      :rules="[{ required: true, message: '手机验证码不能为空' }]">
          <div class="item-flex">
            <el-input v-model="ruleForm.smsCode"
                      class="verificationSty" />
            <div style="
                height: 20px;
                border-left: 1px solid var(--prev-border-color-grey);
                margin-top: 8px;
              " />
            <el-button v-if="isShowMsgCode"
                       :disabled="!ruleForm.phoneNum"
                       style="color: var(--prev-color-primary); font-size: 14px; border: 0px"
                       @click="handleSend">发送验证码</el-button>
            <el-button v-if="!isShowMsgCode"
                       style="color: var(--prev-color-primary); font-size: 14px; border: 0px"
                       disabled>{{ showTime }}秒后重新发送</el-button>
          </div>
        </el-form-item>
        <el-form-item v-if="userType === 3"
                      label="原始密码"
                      prop="oldPassword"
                      style="margin-bottom: 18px"
                      :rules="[{ required: true, message: '原始密码不能为空' }]">
          <el-input v-model.trim="ruleForm.oldPassword"
                    minlength="6"
                    maxlength="20"
                    type="password" />
        </el-form-item>
        <el-form-item label="新密码"
                      prop="password"
                      style="margin-bottom: 18px"
                      :rules="[{ required: true, message: '新密码不能为空' }]">
          <el-input v-model.trim="ruleForm.password"
                    minlength="6"
                    maxlength="20"
                    type="password"
                    show-password
                    @input="onInput(ruleForm.password)"
                    @blur="loseBlur"></el-input>
          <password-intensity :is-feeble="isFeeble"
                              :is-middle="isMiddle"
                              :is-strong="isStrong"></password-intensity>
        </el-form-item>
        <el-form-item label="确认密码"
                      prop="confirmPassword"
                      :rules="[{ required: true, message: '确认密码不能为空' }]">
          <el-input v-model.trim="ruleForm.confirmPassword"
                    minlength="6"
                    maxlength="20"
                    type="password"
                    show-password
                    @input="newOnInput(ruleForm.confirmPassword)"
                    @blur="newLoseBlur"></el-input>
          <password-intensity :is-feeble="isNewFeeble"
                              :is-middle="isNewMiddle"
                              :is-strong="isNewStrong"></password-intensity>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="default"
                   @click="handleClose">取消</el-button>
        <el-button type="primary"
                   @click="container()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { user, tenant } from "@/api/index";
import PasswordIntensity from "@/components/public/PasswordIntensity";
import Authentication from "@/views/enroll/Authentication.vue";
import authenticationMixins from "@/libs/authentication";
import password from "@/libs/password";
export default {
  components: { PasswordIntensity, Authentication },
  mixins: [password, authenticationMixins],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: "550px"
    },
    title: {
      type: String,
      default: "修改密码"
    },
    phoneNum: {
      type: String
    }
  },
  data () {
    return {
      ruleForm: {
        phoneNum: this.phoneNum,
        smsCode: "",
        confirmPassword: "",
        password: "",
        oldPassword: ""
      },
      rules: {},
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    user () {
      return JSON.parse(this.userInfo)
    },
    userType () {
      return this.user?.type
    },
    userId () {
      return this.user?.userId
    }
  },
  methods: {
    async sendCode () {
      let { code, message } = await tenant.passwordCode({
        phoneNum: this.ruleForm.phoneNum
      });
      this.$message[code === 0 ? "success" : "error"](message);
    },
    handleClose () {
      this.$emit("update:visible", false);
    },
    async container () {
      await this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ruleForm.password !== this.ruleForm.confirmPassword) {
            return this.$message({ message: "两次密码输入不一致", type: "warning" });
          }
          if (this.ruleForm.password.length < 6 || this.ruleForm.password.length > 20) {
            return this.$message({ message: "密码长度6-20位", type: "warning" });
          }
          if (this.isNewFeeble) {
            return this.$message({ message: "密码强度不够，至少要包含数字，字母，特殊字符三项中两项！", type: "warning" });
          }

          if (this.userType === 3) {
            // 普通账号修改密码
            this.revisePassword();
          } else {
            // 管理员账号修改密码
            this.updatePassword();
          }
        }
      });
    },
    async updatePassword () {
      let postData = JSON.parse(JSON.stringify(this.ruleForm));
      postData.password = this.$md5(postData.password);
      postData.confirmPassword = this.$md5(postData.confirmPassword);
      postData.userKeyId = this.userId;
      let { code, message } = await tenant.passwordSMS(postData);
      this.$message[code === 0 ? "success" : "error"](message);
      if (code === 0) {
        this.handleClose();
        this.$router.push({ name: "login" });
      }
    },
    async revisePassword () {
      let postData = JSON.parse(JSON.stringify(this.ruleForm));
      postData.oldPassword = this.$md5(postData.oldPassword);
      postData.newPassword = this.$md5(postData.password);
      postData.confirmPassword = this.$md5(postData.confirmPassword);
      let { code, message } = await user.revisePassword(postData);
      this.$message[code === 0 ? "success" : "error"](message);
      if (code === 0) {
        this.handleClose();
        setTimeout(() => {
          this.$router.push({ name: "login" });
        }, 1500);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-box >>> .el-dialog__body {
  max-height: 460px !important;
  overflow: auto !important;
}
.el-form {
  .el-input {
    width: 300px;
    margin-right: 10px;
  }
}
.item-flex {
  display: flex;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 380px;
}
.authen-show {
  width: 100%;
  text-align: center;
  z-index: 999;
  height: 100%;
}
.verificationSty {
  /deep/ .el-input__inner {
    border: 0px;
    width: 260px;
  }
}
/deep/ .el-input__inner {
  // width: 380px;
}
</style>
